<template>
  <div class="container">
    <div class="tip" v-if="page > total && tipFlag">没有更多数据了</div>
    <div class="loading-box" v-if="loadingFlag && page <= total">
      <div class="loading"></div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps({
  page: Number, //接受页数
  total: Number, //接收总页数
  loadingFlag: Boolean, //是否正在加载数据
  tipFlag: Boolean, //是否显示 "没有更多数据的提示"
});
</script>
<style lang="scss">
.container {
  .tip {
    color: #858a99;
    font-size: 16px;
    text-align: center;
    margin: 5px;
  }
  .loading-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 6px;

    .loading {
      width: 30px;
      height: 30px;
      border: 2px solid #858a99;
      border-top-color: transparent;
      border-radius: 100%;
      text-align: center;
      animation: circle infinite 0.75s linear;
    }

    // 转转转动画
    @keyframes circle {
      0% {
        transform: rotate(0);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  }
}
</style>
